import React, {Component} from 'react';
import {Steps,Row,Col,Button} from 'antd';

import '../../static/brief/step.styl'

import {Link as Linko} from 'react-router-dom'

import MTable from './table'

// import api from '../../common/request'

const Step = Steps.Step;
// const TabPane = Tabs.TabPane;


export default class Step02 extends Component{
  constructor(props){
    super(props);
    let len;
    if(localStorage.Temporarymaterial){
      len=JSON.parse(localStorage.Temporarymaterial).length
    }else{
      len=0
    }
      this.state={
        InpValue:'',
        briefnum:len,
      }
      this.renClickdata=this.renClickdata.bind(this)
      this.hanClick=this.hanClick.bind(this)
  }
  componentDidMount(){
    //this._renderdata()
  }
  //确定查找数据
  handleSure(){
    this._renderdata()
  }
  renClickdata(data){
    this.setState({
      data:data
    })
  }

  //input 框
  onchangeInput(e){
    this.setState({
      InpValue:e.target.value
    })
  }
  //搜索确定
  handleSearch(data){
    this.setState({
      data:data
    })
  }
  //修改当前素材数num
  hanClick(num){
    alert(num)
    this.setState({
      briefnum:num
    })
  }
  link(url){
    this.props.history.push(url)
  }
  render(){
    return(
        <div className="brief step01">
          <div className="top">
            <div className="title">
              <span className="left-title">简报制作</span>
              <span className="right-title">半自动化生成或舆情分析报</span>
            </div>
            <div className="section">
              <Row>
                <Col span={18}>
                <p>如果您有更专业的简报需求,请点击联系<a>人工简报</a>服务</p>
                <div className="steps-con">
                  <div className="steps" style={{position: 'relative'}}>
                    <Steps  current={2}>
                      <Step title="" onClick={()=>this.link('/step01')}/>
                      <Step title="" onClick={()=>this.link('/step02')}/>
                      <Step title="" onClick={()=>this.link('/generate')}/>
                      <Step title="" />
                    </Steps>
                    </div>
                    <div className="step-info">
                      <div>步骤1-选择素材</div>
                      <div>步骤2-确认素材</div>
                      <div>步骤3-选择样式</div>
                      <div>步骤4-生成简报</div>
                    </div>
                </div>
                </Col>
                <Col span={6}>
                  <div className="generate">
                    <div className="num">
                      <p>{this.state.briefnum}</p>
                      <p>当前素材数</p>
                    </div>
                    <div className="c-btn">
                      <Button type="primary">
                        <Linko to="/generate">生成简报</Linko></Button>
                      <Button>
                        <Linko to="/step02">进入素材库</Linko></Button>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
            
            <div className="table-data">
              <div className="table-title">
                编辑简报素材
              </div>
              <div className="table">
                <MTable
                      typeLi="editor"
                  rowSelection={this.rowSelection}
                  handleSure={this.handleSure}
                  renClickdata={this.renClickdata}
                  hanClick={this.hanClick}>
                  
                </MTable>
              </div>
          </div>
        </div>
    )
  }
}